<template>
  <!-- 杨 -->
  <div class="pl">
    <el-input v-model="textarea" :rows="4" maxlength="50" show-word-limit type="textarea" placeholder="晒一下自己的感受吧！" />
    <div style="text-align: right; margin-top: 10px;">
      <el-button type="primary" @click="fb">发布</el-button>
    </div>
  </div>
  <div class="community" v-for="item in Data">
    <el-descriptions>
      <el-descriptions-item label="昵称">{{ item.nick }}</el-descriptions-item>

      <el-descriptions-item label="学校">
        <el-tag size="small">{{ item.school }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="发布时间">{{ item.updateAt }}</el-descriptions-item>
      <el-descriptions-item label="评论">

        {{ item.context }}

      </el-descriptions-item>

    </el-descriptions>
    <el-divider />
  </div>
  <div style="text-align: right;display: flex; justify-content: flex-end; margin-top: 20px;">
    <el-pagination layout="prev, pager, next" :total="(pagea / 5) * 10" @current-change="paging" />
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import { publish, comment } from '../../ApI/function/Home.js'
const textarea = ref('')

const id = localStorage.getItem('id')

// 发布
const fb = () => {
  if (textarea.value == '') return null
  publish({
    id: id,
    context: textarea.value
  }).then((res) => {
    if (res.code == "0000") {
      ElMessage({
        message: '发布成功',
        type: 'success',
      })
      ListData()
    } else {
      ElMessage.error(res.msg)
    }
    textarea.value = ''
  })
}

const page = ref(1)
// 获取发布数据
const Data = ref('')
const pagea = ref(null)
const ListData = () => {
  comment({ page: page.value }).then(res => {
    console.log(res)
    Data.value = res.data.list
    pagea.value = res.data.total
  })
}
ListData()

const paging = (value) => {
  page.value = value
  ListData()
}

</script>

<style scoped lang="less">
.community {
  padding: 20px;
  background-color: #fff;
}

.pl {
  margin: 20px 0px;
}
</style>